<template>
	<!-- 底部导航 -->
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<image class="item-img" :src="item.iconPath" v-if="current == index"></image>
			<image class="item-img" :src="item.icon" v-else></image>
			<text class="tabbartext1"  v-if="current == index">{{item.text}}</text>
			<text class="tabbartext" v-else>{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: String
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '首页', //首页
						icon: 'https://www.iiscchina.com/wp-content/uploads/2023/05/home.png', //未选中图标
						iconPath: 'https://www.iiscchina.com/wp-content/uploads/2023/05/homeactive.png', //选中图片
						path: "/pages/benefit/pages/benefitindex", //页面路径
					},
					{
						text: '训练', //学科
						icon: 'https://www.iiscchina.com/wp-content/uploads/2023/05/xk.png', //未选中图标
						iconPath: 'https://www.iiscchina.com/wp-content/uploads/2023/05/xkactive.png', //选中图片
						path: "/pages/benefit/pages/studentproject",
						// path: "/pages/benefit/pages/projectexercisestwo",
					},
					{
						text: '我的', //我的
						icon: 'https://www.iiscchina.com/wp-content/uploads/2023/05/my.png', //未选中图标
						iconPath: 'https://www.iiscchina.com/wp-content/uploads/2023/05/myactive.png', //选中图片
						path: '/pages/benefit/pages/user',
						// path: '/pages/benefit/pages/reviewapplication',
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 0;
						}
					})
				}
			});
		},
		watch: {

		},
		methods: {
			tabbarChange(path) {
				uni.redirectTo({
					url: path
				})
			}
		}
	};
</script>

<style>
	.tabbartext {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.tabbarActive {
		color: #79D5AD !important;
	}

	.tabbar {
		position: fixed;
		bottom: 48rpx;
		left: 45rpx;
		right: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 600rpx;
		height: 126rpx;
		border-radius: 100rpx;
		background-color: #F5F6F7;
		padding: 0 30rpx;
		z-index: 99;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 40rpx;
	}

	/* 选中后 */
	.item-img {
		width: 50rpx;
		height: 50rpx;
	}

	/* 选中前 */
	.item-img1 {
		width: 50rpx;
		height: 50rpx;
	}
	.tabbartext1{
		color:#2484FE;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
 
</style>
